<template>
	<view>
		<template v-for="(item,index) in list">

			<view class="item">
				<image class="left" :src="item.user.avatar" />

				<view class="middle">
					<view class="text1">{{item.user.nickname}}</view>
					<view class="text2">ID:{{item.user.n_id}}</view>
				</view>

				<view class="right">
					<view class="text1" @click="tolianxi(item)">
						联系他
					</view>
				</view>

			</view>
		</template>
		<view class="black_2">

		</view>
		<view class="black_1">

			<view class="text1" @click="add()">
				我要成为U商
			</view>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<!-- <uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="info" cancelText="取消" confirmText="复制" title="他的微信号" :content="mssage"
					@confirm="dialogConfirm" @close="dialogClose">
				</uni-popup-dialog>
			</uni-popup> -->
		</view>
		<lianxiUShang ref="lianxiUShang"></lianxiUShang>
	</view>
</template>

<script>
	import lianxiUShang from '@/components/addUShang/lianxiUShang.vue'
	export default {
		components:{
			lianxiUShang
		},
		data() {
			return {
				mssage: '45ds4f3s',
				list: [
				// 	{
				// 	"id": 10,
				// 	"user_id": 1,
				// 	"name": "小草",
				// 	"qq": "123456",
				// 	"wx": "13594335473",
				// 	"mobile": "13594335402",
				// 	"status": "1",
				// 	"add_time": 1690293792,
				// 	"user": {
				// 		"id": 1,
				// 		"nickname": "中应交易所",
				// 		"n_id":'8888',
				// 		"avatar": "http://qwc.test/uploads/avatar_default.png"
				// 	}
				// },
				],
				page: 1,
				
			};
		},
		onShow() {
			this.list.length = 0
			this.getList()
		},
		methods: {
			tolianxi(item) {
				this.$refs.lianxiUShang.open(item)
			},
			dialogConfirm() {
				
			},
			dialogClose() {

			},
			add() {
				uni.navigateTo({
					url: '/pages/my/joinU'
				})
			},
			getList() {
				var that =this
				this.api.http.requests('/agent/lists', {
					page: this.page
				}, res => {
					if (res.data && res.data.length > 0) {
						that.list = that.list.concat(res.data)
					}

				}, "POST")
			}
		},
		onReachBottom() {
			this.page = this.page+1
			this.getList()
		}
	}
</script>

<style lang="less">
	.item {
		display: flex;
		justify-content: space-between;
		padding: 10px 10px 10px 10px;
		align-items: center;
		margin: 10px;
		border-bottom: 1px solid #DFDFDF;

		.left {
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}


		.middle {
			margin-left: 10px;
			flex: 1;

			.text1 {
				font-size: 20px;
				font-weight: 800;
				color: #333333;

			}

			.text2 {
				margin-top: 5px;
				font-size: 28rpx;
				font-weight: bold;
				color: #3A3A3A;

			}

		}

		.right {

			.text1 {
				text-align: center;
				width: 81px;
				height: 29px;
				line-height: 29px;
				font-size: 16px;
				font-weight: 400;
				color: #FFFFFF;
				background: #FE903D;
				border-radius: 5px 5px 5px 5px;
			}
		}
	}

	.uni-button-color {
		color: #FE903D;
	}

	.black_1 {

		position: fixed;
		bottom: 20px;
		width: 100%;

		.text1 {
			margin: auto;
			width: 90%;
			height: 50px;
			text-align: center;
			line-height: 50px;
			background: #FE903D;
			border-radius: 8px 8px 8px 8px;
			font-size: 35rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}

	.black_2 {
		height: 80px;
	}
</style>